<template>
	<view class="box" :style="'background: '+ background +';'">
		<image :src="imgSrc" mode="aspectFit"></image>
	</view>
</template>

<script setup>
	import { defineProps, ref } from 'vue';
	const props = defineProps(['type','white'])

	let imgSrc = ref('../../static/images/type/other.png')
	let background = ref('')
	
	imgSrc.value = getSrcByType(props.type, props.white)
	if(props.white) {
		background.value = getLinerGradient(props.type)
	}
	// 获取背景图片地址
	function getSrcByType(type, white) {
		let src = '../../static/images/type/'
		const type_arr = ['education', 'health', 'home', 'other', 'restaurant', 'shopping', 'sport', 'traffic', 'travel']
		if (type_arr.indexOf(type) !== -1) {
			src = src + type
		} else {
			src = src + 'other'
		}
		if (white) {
			src = src + '-w'
		}
		src = src + '.png'
		return src
	}

	// 根据类别获取渐变色
	function getLinerGradient(type) {
		// 根据类型显示不同的渐变色
		let color = ref('linear-gradient(221.67deg, #F6ED9E 0%, #EFAD5F 100%)')
		switch (type) {
			case 'education':
				color = 'linear-gradient(222.9deg, #FFB382 0%, #F07590 100%)'
				break
			case 'health':
				color = 'linear-gradient(223.87deg, #83D2F6 0%, #499EEC 100%)'
				break
			case 'home':
				color = 'linear-gradient(224.97deg, #82C3FB 0%, #626BE6 100%)'
				break
			case 'other':
				color = 'linear-gradient(221.67deg, #F6ED9E 0%, #EFAD5F 100%)'
				break
			case 'restaurant':
				color = 'linear-gradient(223.73deg, #F9D7A8 0%, #E4A16B 100%)'
				break
			case 'shopping':
				color = 'linear-gradient(225.8deg, #FFBBCF 0%, #A665D1 100%)'
				break
			case 'sport':
				color = 'linear-gradient(216.39deg, #9C9EFF 0%, #7A71EF 100%)'
				break
			case 'traffic':
				color = 'linear-gradient(224.97deg, #96EFA6 0%, #26A6B5 100%)'
				break
			case 'travel':
				color = 'linear-gradient(224.97deg, #BEB8FF 0%, #6D63EF 100%)'
				break
			default:
				break
		}
		return color
	}
</script>

<style lang="scss" scoped>
	.box {
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		
		image {
			width: 60%;
			height: 60%;
		}
	}
</style>